<template>
  <div class="box">
    <!-- 导航 -->
    <div class="title">
      <span class="el-icon-arrow-left" @click="$router.go(-1)"></span>
      添加卡片
    </div>
    <!-- 卡片 -->
    <div class="card">
      <div class="card_title">
        <img src="../../../../assets/static/recharge/q4.png" alt=""/>
        <div>卡片号码</div>
      </div>
      <div class="card_num">
        <div>
          <img src="../../../../assets/static/addCard/a2.png" alt="">
          <input v-model="info.card"/>
        </div>
        <div>使用Visa或银行卡，没有充值费。</div>
      </div>
      <!-- 到期日 -->
      <div class="expire">
        <div class="row-wrapper">
          <div>
            <div class="card_title">
              <img src="../../../../assets/static/recharge/q4.png" alt=""/>
              <div>到期日</div>
            </div>
            <div class="expire_card_back">
              <div>
                <input v-model="info.over_time"/>
              </div>
            </div>
          </div>
          <div>
            <div class="card_title">
              <img src="../../../../assets/static/recharge/q4.png" alt=""/>
              <div>cvv</div>
            </div>
            <div class="expire_card_back">
              <div>
                <input v-model="info.cvv"/>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 发卡国家 -->
      <div class="launchCard">
        <div class="card_title">
          <img src="../../../../assets/static/recharge/q4.png" alt=""/>
          <div>发卡国家</div>
        </div>
        <div class="expire_card launchCard_card">
          <div>
            <el-select v-model="info.state_id">
              <el-option :value="item.id" :label="item.name" v-for="item in countryList" :key="item.ROW_NUMBER">
                <div class="row-wrapper">
                  <img class="countryFlag" :src="item.thumb" alt="">
                  <span style="margin-left:10px">{{ item.name }}</span>
                </div>
              </el-option>
            </el-select>
          </div>
          <div>更改</div>
        </div>
        <div class="launchCard_info">
          <div class="launchCard_title">
            第一张卡片是您的默认卡片
          </div>
          <div class="launchCard_list">
            您的卡片可能被收取费用以确保其有效。该金额稍后降自动退还给您。
          </div>
        </div>
      </div>
    </div>
    <!-- 保存 -->
    <div class="save" @click="addBankCard">
      保存
    </div>
    <div class="info">
      添加卡片，意味着您已经阅读并统一我们的协议和条款
    </div>
  </div>
</template>

<script>
import {addBankCard} from '@/api/merbership/member'
import {govlist} from '@/api/merbership/userbank'
import '@/styles/flax.css'

export default {
  data() {
    return {
      info: {
        card: '',
        bank_id: '1',
        state_id: '2',
        over_time: '',
        cvv: ''
      },
      countryList: []
    }
  },
  mounted() {
    this.govlist()
  },
  methods: {
    /**
     * 拼接过期时间
     */
    makeOverTime() {
      this.info.over_time = this.timeStr1 + this.timeStr2 + this.timeStr3
    },
    // ---------------- axios ---------------------------
    /**
     * 银行卡国家接口
     */
    govlist() {
      const pd = {}
      govlist(pd)
        .then(res => {
          this.countryList = res.data.data
        })
    },
    /**
     * 添加银行卡
     */
    addBankCard() {
      addBankCard(this.$qs.stringify(this.info))
        .then(res => {
          this.$message.success(res.data.msg)
        })
    }
  }
}
</script>
<style>
.countryFlag {
  width: 32px;
  height: 18px;
}

.el-select .el-input.is-focus .el-input__inner {
  border-color: transparent;
  outline: none;
}

.el-select .el-input .el-select__caret {
  display: none;
}

.el-input__inner {
  appearance: none;
  width: 240px;
  border-color: transparent;
  outline: none;
  box-shadow: transparent;
}

.el-select:hover .el-input__inner {
  border-color: transparent;
  outline: none;
}

.el-select:focus .el-input__inner {
  border-color: transparent;
  outline: none;
}
</style>
<style scoped>
input {
  width: 60%;
  border-color: transparent;
  outline: none;
}

.box {
  background-color: #f5f5f5;
}

.title {
  background-color: #7ac91b;
  color: #fff;
  font-size: 18px;
  text-align: center;
  padding: 15px;
  font-weight: bold;
}

.title .el-icon-arrow-left {
  float: left;
  margin-top: 5px;
}

/* 卡片 */
.card {
  margin: 15px;
  background-color: #fff;
  padding: 12px;
  border-radius: 10px;
}

/* card 标题 */
.card_title {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
}

.card_title div {
  margin-left: 13px;
}

/* 卡号 */
.card_num {
  color: #66C107;
  font-size: 11px;
}

.card_num > div:nth-child(1) {
  display: flex;
  align-items: center;
  width: 96% !important;
  box-shadow: 0 0 5px #ccc;
  margin: 10px 0;
  border-radius: 10px;
  padding: 5px;
}

.card_num img {
  width: 33px;
  margin-top: 5px;
}

/* 到期日 */
.expire {
  margin: 15px 0;
}

.expire_card {
  padding: 15px;
  color: #999999;
  font-size: 11px;
  box-shadow: 0 0 5px #ccc;
  border-radius: 10px;
  margin: 10px 0;
}

.expire_card_back {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

.expire_card_back div {
  padding: 15px;
  color: #999999;
  font-size: 11px;
  box-shadow: 0 0 5px #ccc;
  border-radius: 10px;
  width: 75%;
}

/* 发卡国家 */
.launchCard_card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #333333;
}

.launchCard_card img {
  width: 31px;
  vertical-align: top;
  margin-right: 7px;
}

.launchCard_card > div:nth-child(2) {
  color: #64BD1F;
}

/* launchCard_state */
.launchCard_info {
  color: #64BD1F;
  text-align: center;
  padding-bottom: 15px;
}

.launchCard_title {
  font-size: 14px;
  margin: 12px 0;
  font-weight: bold;
}

.launchCard_list {
  background-color: rgba(99, 190, 32, 0.3);
  padding: 10px;
  border-radius: 10px;
  font-size: 12px;
}

/* 保存*/
.save {
  margin: 55px;
  background-image: linear-gradient(to right, #FED000, #FFB200);
  text-align: center;
  padding: 15px;
  color: #fff;
  border-radius: 10px;
}

.info {
  font-size: 12px;
  text-align: center;
  font-weight: bold;
  margin-bottom: 40px;
}
</style>
